<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>注册</title>
</head>

<!-- JQ CDN链接 -->
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<!-- layui cssCDN链接 -->
<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css" />
<!-- layui CDN js链接 -->
<script src="http://unpkg.com/layui@2.6.8/dist/layui.js"></script>


<style>
  * {
    padding: 0;
    margin: 0;
  }

  .layui-input {
    width: 60%;
  }

  span {
    float: left;
    line-height: 25px;
    padding-left: 40px;
  }

  #Verification {
    margin-left: 24px;
    width: 54%;
    height: 25px;
    float: left;
    border: 1px solid #eee;
  }

  img {
    float: left;
  }

  button {
    position: absolute;
    top: 120%;
    left: 40%;
    transform: translate(-50%, -50%);
  }


</style>

<body>
  <div class="layui-container">
    <div class="layui-row">
      <div class="div1">
        <div class="layui-form-item">
          <label class="layui-form-label">输入账号</label>
          <div class="layui-input-block">
            <input type="text" name="title" required lay-verify="required" placeholder="账号" autocomplete="off"
              class="layui-input" id="name" />
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">输入密码</label>
          <div class="layui-input-block">
            <input type="text" name="title" required lay-verify="required" placeholder="密码" autocomplete="off"
              class="layui-input" id="pow" />
          </div>
        </div>
        <div style="width: 100%">
          <span>验证码:</span>
          <input type="text" id="Verification" placeholder="请输入右边的验证码" />
          <span style="margin-top: 50px"><img src="" alt="" id="code" width="70%" /></span>
        </div>

        <button class="layui-btn layui-btn-radius layui-btn-normal" id="submit">
          <!-- 注册 -->
      
          <a href="./Login.html">注册</a>
        </button>
      </div>
    </div>
  </div>
</body>

<script>
  var key = "";
  $("#submit").click(function () {
    $.ajax({
      type: "post",
      url: "https://api.zzgoodqc.cn/api/user",
      dataType: "json",
      data: {
        username: $("#name").val(),
        password: $("#pow").val(),
        captcha: $("#Verification").val(),
        key: key,
      },
      success: function (res) {
      
        alert(res.message);
      },
    });
 
  });

  fun();

  function fun() {
    $.ajax({
      type: "get",
      url: "https://api.zzgoodqc.cn/api/captcha",
      dataType: "json",
      success: function (res) {
        console.log(res);
        $("img").attr("src", res.data.img);
        key = res.data.key;
      },
    });
  }

  $("#code").click(fun);
</script>

</html>